<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./../../layui/css/layui.css">
    <title>面样式编辑</title>
    <style>
        .l_title{
            font-size: 14px;
            color: #868686;
            font-weight: bold;
            text-indent: 2px;
            text-align: left !important;
            padding: 9px 0 !important;
        }
        .none{
            display: none;
        }
        /*  */
        .hidden{
            display: none;
        }
        .m_c_upload{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -36px;
            margin-top: -10px;
        }
        .screenshot{
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .colorChoose{
            float: left !important;
            width: 120px;
        }
        .layui-form-select dl dd.layui-this{
            background-color: #00aeff !important;
        }
        .layui-form-radioed>i, .layui-form-radio>i:hover {
            color: #00aeff !important;
        }
        .layui-form-item .layui-form-label{
            white-space:unset!important;
        }
    </style>
</head>
<body>
    <div class="layui-form"  lay-filter="sIfram">
        <div class="layui-form-item">
            <label class="layui-form-label l_title">选择面类型</label>
            <div class="layui-input-block">
                <select name="styletype" id="allPoint" lay-filter="allPoint">
                    <option value="polygonbase">基础面</option>
                    <option value="polygonlayer">拉伸面</option>
                    <option value="polygonmodellayer">沿面模型(切片不可用)</option>
                </select> 
            </div>
        </div>
        <!-- 基础面 -->
        <div class="basisPoints none">
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="13">21</option>
                        <option value="231">32</option>
                        <option value="333">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">填充效果</label>
                <div class="layui-input-block">
                    <select name="effect" lay-verify="">
                        <option value="0">静态填充</option>
                        <option value="1">动态填充</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">填充颜色</label>
                <div class="layui-input-block">
                    <input name="fill" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="pointColor-input">
                    <div style="float: left;">
                        <div id="pointColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示纹理</label>
                <div class="layui-input-block">
                    <input type="text" name="material"  placeholder="上传图片/输入可用的网址" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-top: 5px;">选择文件</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示边框</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="outline" lay-skin="switch" lay-filter="BshowBorder" lay-text="显示|不显示">
                </div>
            </div>
            <div class="layui-form-item none" id="BBorderColor">
                <label class="layui-form-label l_title">边框颜色</label>
                <div class="layui-input-block">
                    <input name="outlineColor" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="pBorderColor-input">
                    <div style="float: left;">
                        <div id="pBorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item none" id="BBorderWidth">
                <label class="layui-form-label l_title">边框宽度</label>
                <div class="layui-input-block">
                    <input type="text" name="outlineWidth"  placeholder="请输入边框宽度" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label l_title">是否贴地</label>
                <div class="layui-input-block">
                    <select name="ground" lay-verify="">
                        <option value="0">贴地面</option>
                        <option value="1">不贴地面</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">是否识别类型</label>
                <div class="layui-input-block">
                    <select name="classificationType" lay-verify="">
                        <option value="2">识别类型</option>
                        <option value="0">不识别类型</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 拉伸面 -->
        <div class="textPoint none">
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="13">21</option>
                        <option value="231">32</option>
                        <option value="333">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">填充效果</label>
                <div class="layui-input-block">
                    <select name="effect" lay-verify="">
                        <option value="0">静态填充</option>
                        <option value="1">动态填充</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">填充颜色</label>
                <div class="layui-input-block">
                    <input name="fill" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="tpFillColor-input">
                    <div style="float: left;">
                        <div id="tpFillColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示纹理</label>
                <div class="layui-input-block">
                    <input type="text" name="material"  placeholder="上传图片/输入可用的网址" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-top: 5px;">选择文件</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示边框</label>
                <div class="layui-input-block">
                  <input type="checkbox" name="outline" lay-skin="switch" lay-filter="LshowBorder" lay-text="显示|不显示">
                </div>
            </div>
            <div class="layui-form-item none" id="LBorderColor">
                <label class="layui-form-label l_title">边框颜色</label>
                <div class="layui-input-block">
                    <input name="outlineColor" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="tpBorderColor-input">
                    <div style="float: left;">
                        <div id="tpBorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item none" id="LBorderWidth">
                <label class="layui-form-label l_title">边框宽度</label>
                <div class="layui-input-block">
                    <input type="text" name="outlineWidth"  placeholder="请输入边框宽度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">高度类型</label>
                <div class="layui-input-block">
                    <select name="heightReference" lay-verify="">
                        <option value="0">绝对值</option>
                        <option value="1">依附地表</option>
                        <option value="2">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">面高度</label>
                <div class="layui-input-block">
                    <input type="text" name="height"  placeholder="输入面高度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">拉伸高度</label>
                <div class="layui-input-block">
                    <input type="text" name="extrudedHeight"  placeholder="输入拉伸高度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">拉伸高度方式</label>
                <div class="layui-input-block">
                    <select name="extrudedHeightReference" lay-verify="">
                        <option value="0">绝对值</option>
                        <option value="1">依附地表</option>
                        <option value="2">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">是否识别模型</label>
                <div class="layui-input-block">
                    <select name="classificationType" lay-verify="">
                        <option value="2">识别模型</option>
                        <option value="0">不识别模型</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <!-- 沿面模型(切片不可用) -->
        <div class="ImagePoint none">
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择矢量服务</label>
                <div class="layui-input-block">
                    <select name="layerName" lay-filter="demo1">
                        <option value="13">21</option>
                        <option value="231">32</option>
                        <option value="333">32</option>
                        <option value="32">32</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">显示级别</label>
                <div class="layui-input-block">
                    <div style="float: left;width: 32%;margin-right: 2%;">
                        <input type="text" name="level_min"  placeholder="0" autocomplete="off" class="layui-input">
                    </div>
                    <div style="float: left; width: 32%;margin-right: 2%;">
                        <input type="text" name="level_max"  placeholder="21" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">填充颜色</label>
                <div class="layui-input-block">
                    <input name="fill" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="ABorderColor-input">
                    <div style="float: left;">
                        <div id="ABorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">选择模型</label>
                <div class="layui-input-block">
                    <input type="text" name="uri"  placeholder="上传图片/输入可用的网址" autocomplete="off" class="layui-input">
                    <button type="button" class="layui-btn layui-btn-normal" style="margin-top: 5px;">选择文件</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">模型颜色</label>
                <div class="layui-input-block">
                    <input name="color" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="IBorderColor-input">
                    <div style="float: left;">
                        <div id="IBorderColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">高亮颜色</label>
                <div class="layui-input-block">
                    <input name="lightColor" type="text" value="#1c97f5" placeholder="请选择颜色" class="layui-input colorChoose" id="AHighlightColor-input">
                    <div style="float: left;">
                        <div id="AHighlightColor" style="margin: 0;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">缩放比例</label>
                <div class="layui-input-block">
                    <input type="text" name="scale"  placeholder="请输入缩放比例(0.01)" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">属性X间距</label>
                <div class="layui-input-block">
                    <input type="text" name="offset_x"  placeholder="0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">属性Y间距</label>
                <div class="layui-input-block">
                    <input type="text" name="offset_y"  placeholder="0" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">高度类型</label>
                <div class="layui-input-block">
                    <select name="heightReference" lay-verify="">
                        <option value="0">绝对值</option>
                        <option value="1">依附地表</option>
                        <option value="2">相对地表</option>
                    </select> 
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">高度</label>
                <div class="layui-input-block">
                    <input type="text" name="height"  placeholder="请输入高度" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最小可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="near"  placeholder="请输入最小可视距离" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label l_title">最大可视距离</label>
                <div class="layui-input-block">
                    <input type="text" name="far"  placeholder="请输入最大可视距离" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./../../JS/jquery-2.0.3.js"></script>
<script src="./../../node_modules/iframeResizer.contentWindow.js"></script>
<script src="./../../layui/layui.js"></script>
<script>
    var form = null;
     $(function () {
        layui.use(['element','form','colorpicker'], function () {
            var $ = layui.$,
                element = layui.element,
                colorpicker = layui.colorpicker;
            form = layui.form;

            //给表单赋值
            if (parent.sIframForm  && parent.sIframForm.d_type === 'polygon') {
                var obj = JSON.parse(JSON.stringify(parent.sIframForm))
                //样式类型
                surType(obj.styletype);
                //外边框显示
                if(obj.xsbk) {
                    $('#BBorderWidth').show()
                    $('#BBorderColor').show()
                }
                if(obj.xsbk2) {
                    $('#LBorderWidth').show()
                    $('#LBorderColor').show()
                }
                form.val('sIfram',obj);
            }

            // 是否默认基础点
            var pv  = $('#allPoint').val();
            if(pv == 'polygonbase'){
                $('.basisPoints').removeClass('none')
            }
            // 监听基础面、拉伸面、沿面模型(切片不可用)
            form.on('select(allPoint)', function (data) {
                surType(data.value)
            });
            // 监听基础面中 是否显示边框
            form.on('switch(BshowBorder)',function(data){
                if(this.checked == true){
                    $('#BBorderWidth').show()
                    $('#BBorderColor').show()
                }else{
                    $('#BBorderWidth').hide()
                    $('#BBorderColor').hide()
                }
            })
            // 监听拉伸面中 是否显示边框
            form.on('switch(LshowBorder)',function(data){
                if(this.checked == true){
                    $('#LBorderWidth').show()
                    $('#LBorderColor').show()
                }else{
                    $('#LBorderWidth').hide()
                    $('#LBorderColor').hide()
                }
            })
            //监听指定开关
            // 基础面 填充颜色
            colorpicker.render({
                elem: '#pointColor'
                ,color: (parent.sIframForm && parent.sIframForm.fill) || '#1c97f5'
                ,done: function(color){
                $('#pointColor-input').val(color);
                }
            });
            // 基础面 边框颜色
            colorpicker.render({
                elem: '#pBorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.outlineColor) || '#1c97f5'
                ,done: function(color){
                $('#pBorderColor-input').val(color);
                }
            });
            // 拉伸面 填充颜色
            colorpicker.render({
                elem: '#tpFillColor'
                ,color: (parent.sIframForm && parent.sIframForm.fill) || '#1c97f5'
                ,done: function(color){
                $('#tpFillColor-input').val(color);
                }
            });
            // 拉伸面 边框颜色
            colorpicker.render({
                elem: '#tpBorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.outlineColor) || '#1c97f5'
                ,done: function(color){
                $('#tpBorderColor-input').val(color);
                }
            });          
            // 沿面模型 填充颜色
            colorpicker.render({
                elem: '#ABorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.fill) || '#1c97f5'
                ,done: function(color){
                $('#ABorderColor-input').val(color);
                }
            });
            // 沿面模型 模型颜色
            colorpicker.render({
                elem: '#IBorderColor'
                ,color: (parent.sIframForm && parent.sIframForm.color) || '#1c97f5'
                ,done: function(color){
                $('#IBorderColor-input').val(color);
                }
            });
            // 沿面模型 高亮颜色
            colorpicker.render({
                elem: '#AHighlightColor'
                ,color: (parent.sIframForm && parent.sIframForm.lightColor) || '#1c97f5'
                ,done: function(color){
                $('#AHighlightColor-input').val(color);
                }
            });
        });
    })


    //选择面类型
    function surType(data) {
        if(data == 'polygonbase'){ //基础面
            $('.basisPoints').removeClass('none')
            $('.textPoint').addClass('none')
            $('.ImagePoint').addClass('none')
        }else if(data == 'polygonlayer'){ //拉伸面
            $('.basisPoints').addClass('none')
            $('.textPoint').removeClass('none')
            $('.ImagePoint').addClass('none')
        }else if(data == 'polygonmodellayer'){ //沿面模型
            $('.basisPoints').addClass('none')
            $('.textPoint').addClass('none')
            $('.ImagePoint').removeClass('none')
        }
    }
</script>
</html>